<template>
	<view>
		<view class="header">
			<uni-search-bar placeholder="请输入关键字搜索" @confirm="searchFn" v-model='search'></uni-search-bar>
		</view>
		<view class="list">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption"
				:down="{use: false}" :bottom='40' :heigth="windowHeight">
				<view class="list-card" v-for="item in birdList" :key="item.id">
					<image :src="item.avatar" mode="heightFix"></image>
					<view class="text-content" @click="chooseBird(item)">
						<text class="title">{{item.name}}</text>
						<text class="title-right">></text>
					</view>
				</view>
			</mescroll-body>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" :title="popup.message" :duration="0" @confirm="confirm">
				<slot name="default">
					<uni-number-box :min="1" v-model="popup.num" />
				</slot>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				birdSearch: '',
				windowHeight: 0,
				birdList: [],
				search: '',
				upOption: {
					use: true,
					page: {
						size: 10 // 每页数据的数量
					},
					textNoMore: '没有数据了',
					empty: {
						tip: '暂无数据' // 初始化第一页时，没有结果的提示
					},
				},
				popup: {
					name: '',
					message: '',
					num: 1,
					avatar: '',
				},
			}
		},
		props: {
			from: String
		},
		methods: {
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				setTimeout(() => {
					const curPageData = [{
						avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
						name: '红头鸭',
						id: new Date().getTime()
					}]
					const curPageLen = 10
					const total = 22
					//设置列表数据
					// if(page.num == 1) this.birdList = []; //如果是第一页需手动置空列表
					this.birdList = this.birdList.concat(curPageData); //追加新数据
					this.mescroll.endByPage(curPageLen, Math.ceil(total/curPageLen));
				}, 500)
			},
			chooseBird(val) {
				this.popup.message = `请输入<${val.name}>的数量`
				this.popup.num = 1
				this.popup.name = val.name
				this.popup.avatar = val.avatar
				this.$refs.popup.open()
			},
			confirm() {
				this.$refs.popup.close()
				uni.navigateBack({
					delta: 1
				})
				uni.$emit('bird-type', {
					name: this.popup.name,
					num: this.popup.num,
					avatar: this.popup.avatar,
				})
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = (res.windowHeight - 100) + 'px'
				}
			})

			this.birdList = [{
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭',
					id: 1
				},
				{
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭2',
					id: 2
				},
				{
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭3',
					id: 3
				},
				{
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭4',
					id: 4
				},
				{
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭5',
					id: 5
				},
				{
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭6',
					id: 6
				}, {
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭7',
					id: 7
				}, {
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭8',
					id: 8
				}, {
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭9',
					id: 9
				}, {
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭10',
					id: 10
				}, {
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭11',
					id: 11
				}, {
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭12',
					id: 12
				}, {
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭13',
					id: 13
				}, {
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭14',
					id: 14
				}, {
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
					name: '绿头鸭15',
					id: 15
				},
			]
		},
	}
</script>
<style lang="scss">
	.list {
		text-align: left;
	}

	.header {
		border-bottom: 2rpx solid #e0e5e5;
	}
</style>
